<template>
  <div>
    <!-- 问答 -->
    <van-nav-bar fixed>
      <template #left>
        <router-link :to="{ path: '/questions' }">
          <p style="color: #e98b71">提问</p>
        </router-link>
      </template>
      <template #title>
        <router-link to="search">
          <van-search
            :clearable="false"
            left-icon="/baking_log/FltPAS-35CZfvSpnHacXWoqcfFz5.png"
            color="gray"
            style="padding: 0"
            placeholder="搜索食谱"
            input-align="center"
          />
        </router-link>
      </template>

      <template #right
        ><router-link :to="{ path: '/remind' }">
          <van-icon
            name="/baking_log/FjmYGE5z6RvQL-_fdLKuSGYfmwO2.png"
            size="20"
            color="black"
          />
        </router-link>
      </template>
    </van-nav-bar>
    <div style="height: 46px"></div>
    <van-tabs
      v-model="active"
      color="#FF7F24"
      title-active-color="#FF7F24"
      title-inactive-color="#BEBEBE"
      offset-top="46px"
      sticky
    >
      <van-tab title="精华问答">
        <que-Answer v-for="i in 6" :key="i"></que-Answer>
      </van-tab>
      <van-tab title="最新问题">
        <que-Answer v-for="i in 6" :key="i"></que-Answer>
      </van-tab>
      <van-tab title="最热问题">
        <que-Answer v-for="i in 6" :key="i"></que-Answer>
      </van-tab>
    </van-tabs>
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import QueAnswer from "@/components/QueAnswer.vue";
export default {
  components: { QueAnswer },

  data() {
    return {
      active: 1,
    };
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__title) {
  max-width: 72%;
  /* padding-right: 10px; */
}
:deep(.van-search) {
  width: 72vw;
}
:deep(.van-icon__image) {
  margin-top: 4px;
}
:deep(.van-tabs__line) {
  bottom: 20px;
  width: 50px;
  /* background-color: #ea9077; */
}
</style>

<style lang="scss" scoped></style>
